<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="bootstrap.css" />
    <style>
      .table-cont{
        margin:8px;
      }
      .div1{
        width:800px;
        overflow:hidden;
      }
       .div1_1{
         width:900px;
       }
       .div2{
         margin-top:-20px;
         width:800px;
         height:400px;
         overflow:auto;
       }
       #table1{
         width:880px;
       }
       #table2{
         width:880px;
         max-width:880px;
         white-space:nowrap;
       }
       #table1 th,#table2 td{
         width:10%;
         /*background:rgb(253, 253, 253)*/
       }
       tr td:first-child,tr td:nth-child(2),#one,#two{
         background:rgb(246, 254, 255);
       }
    </style>
  </head>
  <body>
  <div class="table-cont">
    <div class="div1">
      <div class="div1_1">
        <table id="table1" class="table table-bordered">
          <thead>
            <tr>
              <th id="one"><div>num</div></th>
              <th id="two"><div>name</div></th>
              <th>sex</th>
              <th>year</th>
              <th>height</th>
              <th>weight</th>
              <th>home</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <div class="div2">
      <table id="table2" class="table table-bordered">       
        <tbody>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
          <tr>
            <td><div>1</div></td>
            <td><div>Nancy</div></td>
            <td>girl</td>
            <td>21</td>
            <td>170cm</td>
            <td>56kg</td>
            <td>usa</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  </body>
  <script src="jquery.min.js"></script>
  <script>
      window.onload = function(){
        var tableCont = document.querySelector('.div2')
        function scrollHandle (e){
            var scrollTop = this.scrollTop;
            var scrollLeft = this.scrollLeft;
            $(".div1").scrollLeft(scrollLeft);   
           
            $("#table2 tr td:nth-child(1)").each(function(){
                $(this).css({"transform":'translateX(' + scrollLeft + 'px)','padding':'0px'}).children().css({'border-right':'1px solid #ddd','padding':'8px'});
                $('#one').css({"transform":'translateX(' + scrollLeft + 'px)','padding':'0px'}).children().css({'border-right':'1px solid #ddd','padding':'8px'});     
            });
            $("#table2 tr td:nth-child(2)").each(function(){
                $(this).css({"transform":'translateX(' + scrollLeft + 'px)','padding':'0px'}).children().css({'border-right':'1px solid #ddd','padding':'8px'});     
                $('#two').css({"transform":'translateX(' + scrollLeft + 'px)','padding':'0px'}).children().css({'border-right':'1px solid #ddd','padding':'8px'});     
            });
        }
        tableCont.addEventListener('scroll',scrollHandle)
    }
  </script>
</html>
